<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>预约单信息</title>

    <link rel="stylesheet" href="css/my.css">
    <link rel="stylesheet" href="css/nav.css">
    <link href="/front/css/bootstrap.min.css" rel="stylesheet">
    <link href="/end/css/quill.snow.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }
        .ql-editor img {
            width: 600px;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <!-- 头部开始 -->
    <div style="width: 100%; height: 60px; line-height: 60px; background: rgb(100 152 231)">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div style="color: rgb(100 152 231); font-size: 20px;">汽车租赁系统</div>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <span v-if="user.name" style="color: #eee;">
                        <span style="color: rgb(100 152 231); margin-right: 20px">{{user.name}}</span>
                        <a style="color: #eee;" href="javascript:void(0)" @click="logout">退出</a>
                        <a style="color: #eee;" v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
                    </span>
                </div>
                <div class="col-md-2" style="text-align: right">
                    <a href="/end/page/login.html" target="_blank" style="color: #eee; margin-right: 10px">登录</a>
                    <a href="/end/page/register.html" target="_blank" style="color: #eee;">注册</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航开始 -->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%; height: 50px; line-height: 50px;">
            <div class="col-md-12" style="padding: 0">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a></li>
                        <li class="nav-item"><a href="advertiserInfo.html">通知管理</a></li>
			<li class="nav-item"><a href="messageInfo.html">留言板</a></li>
			<li class="nav-item"><a href="submitInfo.html">事故检查</a></li>
			<li class="nav-item"><a href="richtextInfo.html">政策信息宣传</a></li>
			<li class="nav-item active"><a href="cartInfo.html">预约单信息</a></li>
			<li class="nav-item"><a href="orderInfo.html">订单信息</a></li>
			<li class="nav-item"><a href="commentInfo.html">评价信息</a></li>

                        <li class="nav-item"><a href="javascript:void(0)" @click="personalPage">个人信息</a></li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 头部结束 -->
    <div class="container" style="margin-top: 10px">
        <div class="info">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="panel panel-default">
                        <div class="panel-body bg-gray">
                            <div v-if="isPraise" style="text-align: right; font-size: 18px">
                                <i class="fa fa-thumbs-o-up praise" @click="hotClick()"><span style="margin-left: 3px; font-size: 12px">{{praiseCount}}</span></i>
                            </div>
							<div class="row p-10" style="margin-bottom: 10px">
								<div class="col-md-2">数量：</div>
								<div class="col-md-10">{{ obj.count }}</div>
							</div>
							<div class="row p-10" style="margin-bottom: 10px">
								<div class="col-md-2">用户id：</div>
								<div class="col-md-10">{{ obj.userId }}</div>
							</div>
							<div class="row p-10" style="margin-bottom: 10px">
								<div class="col-md-2">汽车id：</div>
								<div class="col-md-10">{{ obj.goodsId }}</div>
							</div>
							<div class="row p-10" style="margin-bottom: 10px">
								<div class="col-md-2">创建时间：</div>
								<div class="col-md-10">{{ obj.createTime }}</div>
							</div>
							<div class="row p-10" style="margin-bottom: 10px">
								<div class="col-md-2">用户等级：</div>
								<div class="col-md-10">{{ obj.level }}</div>
							</div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--richtext
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="ql-editor panel-body" id="view-notice-body">

                    </div>
                </div>
            </div>
        </div>
        richText-->
        <!-- /. 表单数据 -->
        <div v-if="isThisCollect" class="row">
            <div class="col-md-8 col-md-offset-2" style="text-align: right;">
                <button class="btn-sm btn-primary f-r" @click="collect()">收藏</button>
                <hr>
            </div>
        </div>

        <div class="comment" v-if="isComment">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <h2>评论</h2>
                </div>
            </div>


            <div class="comment-item">
                <!--                <div class="row mt-10">-->
                <!--                    <div class="col-md-8 col-md-offset-2" style="font-size: 20px; font-weight: bold">admin</div>-->
                <!--                </div>-->
                <div class="row mt-10">
                    <div class="col-md-8 col-md-offset-2" style="text-align: justify">
                        <textarea style="resize:none; width: 100%" rows="3" v-model="comment.content"></textarea>
                    </div>
                </div>
                <div class="row mt-10">
                    <div class="col-md-8 col-md-offset-2" style="text-align: right;">
                        <button class="btn btn-primary f-r" @click="add()">发送</button>
                        <hr>
                    </div>
                </div>
            </div>

            <div class="comment-item">
                <div v-for="item in comments" class="row mt-10">
                    <div class="col-md-8 col-md-offset-2">
                        <div class="col-md-1" style="text-align: right"><b>{{item.name}}</b></div>
                        <div class="col-md-11">
                            <div class="row">
                                <div class="col-md-8" style="text-align: justify;">{{item.content}}</div>
                                <div class="col-md-4" style="text-align: right">{{item.time}}</div>
                                <div style="color: #888" v-for="child in item.children">
                                    <div class="col-md-12" style="margin-top: 10px; ">{{child.name}}回复：</div>
                                    <div class="col-md-8">{{child.content}}</div>
                                    <div class="col-md-4" style="text-align: right">{{child.time}}</div>
                                </div>

                                <div class="col-md-6" style="margin-top: 10px">
                                    <input type="text" class="form-control" style="width: 80%; display: inline-block" v-model="item.replayText">
                                    <button class="btn btn-sm" @click="reply(item.id, item.replayText)">回复</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12"><hr  style="margin: 10px 0"/></div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="/end/js/quill.js"></script>
<script src="js/my.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            imgWidth: '0px',
            comments: [],
            content: '',
            obj: {},
            isComment: false,
            comment: {
                content: '',
                foreignId: 0
            },
            fileSrc: '',
            user: {},
            isShow: false,
            praiseCount: 0,
            isPraise: false,
            isCollect: false,
            isThisCollect: false
        },
        created() {
            axios.get('/auth').then(res => {
                if (res.data.code === '0') {
                    this.user = res.data.data;
                    this.isShow = true;
                }
            });

            this.getPraiseCount();

            let id = this.getQueryVariable('id');
            this.comment.foreignId = id;
            if (id !== 0) {
                axios.get('/cartInfo/' + id).then(res => {
                    if (res.data.code === '0') {
                        let obj = res.data.data;
                        this.obj = obj;
                        if (obj.fileName) {
                            if (/\.(png|jpg|gif|jpeg|webp)$/.test(obj.fileName)) {
                                this.obj.fileType = 'image';
                            } else if (/\.mp4$/.test(obj.fileName)) {
                                this.obj.fileType = 'video';
                            } else {
                                this.obj.fileType = 'other';
                            }
                            this.fileSrc = '/files/download/' + obj.fileId;

                            let img = new Image();
                            img.src = this.fileSrc;
                            let _this = this;
                            img.onload = function(){
                                if (img.width > 590) {
                                    _this.imgWidth = "100%";
                                } else {
                                    _this.imgWidth = img.width + "px";
                                }
                            };
                        }
                        /*richText
                        $('#view-notice-body').html(obj.content);
                        richText*/
                    } else {
                        alert(res.data.msg)
                    }
                });
                this.loadComments(id);
            }
        },
        methods: {
            add() {
                if (this.comment.content === '') {
                    return;
                }
                axios.post('/cartInfoComment', this.comment).then(res => {
                    if (res.data.code === '0') {
                        this.comment.content = '';
                        this.loadComments(this.comment.foreignId);
                    } else {
                        alert(res.data.msg);
                    }
                })
            },
            loadComments(id) {
                axios.get('/cartInfoComment/findByForeignId/' + id).then(res => {
                    if (res.data.code === '0') {
                        this.comments = res.data.data;
                    } else {
                        alert(res.data.msg)
                    }
                })
            },
            getQueryVariable(key) {
                let query = window.location.search.substring(1);
                let vars = query.split("&");
                for (let i = 0; i < vars.length; i++) {
                    let pair = vars[i].split("=");
                    if (pair[0] === key) {
                        return pair[1];
                    }
                }
                return '';
            },
            getPraiseCount() {
                let id = this.getQueryVariable('id');
                axios.get('/cartInfoPraise/count/' + id).then(res => {
                    if (res.data.code === '0') {
                        this.praiseCount = res.data.data;
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            hotClick() {
                let id = this.getQueryVariable('id');
                let _this = this;
                axios.post('/cartInfoPraise',
                    {userId: _this.user.id, level: _this.user.level, foreignId: id})
                    .then(res => {
                        if (res.data.code === '0') {
                            alert('点赞成功');
                            _this.getPraiseCount();
                        } else {
                            alert(res.data.msg);
                        }
                    })
            },
            collect() {
                axios.post("/collectInfo", this.obj).then(res => {
                    if (res.data.code === "0") {
                        alert("收藏成功")
                    } else {
                        alert(res.data.msg)
                    }
                })
            },
            reply(id, content) {
                let user = this.user;
                if (!user || !user.name) {
                    alert('请先登录');
                    this.loadComments(id);
                    return;
                }
                if (!content) {
                    alert('请输入内容');
                    return;
                }
                let foreignId = this.getQueryVariable('id');
                let data = {content: content, name: user.name, foreignId: foreignId, parentId: id};
                axios.post('/cartInfoComment', data).then(res => {
                    $('#message-text').val('');
                    alert('回复成功');
                    this.loadComments(foreignId);
                })
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
